<template>
  <!-- 我的海报  生成海报 -->
  <el-dialog class="pick-dialog" title="我的海报" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="1000px">
    <div class="flex pagebox">
      <div class="form-box">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
          <el-form-item label="标题:" prop="zhuti" v-if="ruleForm.mode==1">
            <el-input v-model="ruleForm.zhuti" show-word-limit maxlength="10" placeholder="请输入主题，简明扼要,10字内"></el-input>
          </el-form-item>
          <el-form-item label="主做游戏:" prop="gamedes" v-if="ruleForm.mode==2">
            <el-input type="textarea" v-model="ruleForm.gamedes" maxlength="15" show-word-limit placeholder="主要经营的游戏，15字内"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍:" prop="jieshao">
            <el-input type="textarea" v-model="ruleForm.jieshao" maxlength="30" show-word-limit placeholder="介绍你的商品优势等，30字内"></el-input>
          </el-form-item>
          <el-form-item label="售后服务:" prop="shouhou">
            <el-input type="textarea" v-model="ruleForm.shouhou" maxlength="30" show-word-limit placeholder="介绍你的售后服务，30字内"></el-input>
          </el-form-item>
          <el-form-item label="宣传目的:" prop="xuanchuan" v-if="ruleForm.mode==1">
            <el-input type="textarea" v-model="ruleForm.xuanchuan" maxlength="30" show-word-limit placeholder="你的宣传目的，30字内"></el-input>
          </el-form-item>
          <el-form-item label="对接模式:" prop="duijie">
            <el-input type="textarea" v-model="ruleForm.duijie" maxlength="30" show-word-limit placeholder="你的对接模式，30字内"></el-input>
          </el-form-item>
          <el-form-item label="标题颜色:" prop="color" v-if="ruleForm.mode==1">
            <el-radio v-model='ruleForm.color' :label="0">白色</el-radio>
            <el-radio v-model='ruleForm.color' :label="1">黄色</el-radio>
            <el-radio v-model='ruleForm.color' :label="2">绿色</el-radio>
          </el-form-item>
          <el-form-item label="模板:" prop="mode">
            <el-radio v-model='ruleForm.mode' :label="1" @change="modechange(1)">模板1</el-radio>
            <el-radio v-model='ruleForm.mode' :label="2" @change="modechange(2)">模板2</el-radio>
          </el-form-item>
        </el-form>
        <div class="center">
          <!-- <el-button @click="close('ruleForm')">取消</el-button> -->
          <!-- <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">预览</el-button> -->
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">保存海报</el-button>
        </div>
      </div>
      <div v-if="ruleForm.mode==1" class="haibao-box" ref="haibaoRef">
        <div class="yudutxt">
          <img src="https://imgage.maimaihao.com/yuduhulian/erp/static/logo80x80.png" alt="">
          <span>虞都互联 让每位商家都拥有属于自己的平台</span>
        </div>
        <div class="shopname_box">
          <div class="name">{{shopInfo?shopInfo.tenantName:''}}</div>
          <div class="domain">http://{{shopInfo&&shopInfo.domain&&shopInfo.domain.includes(',')?shopInfo.domain.split(',')[0]:shopInfo?shopInfo.domain:''}}</div>
        </div>
        <div class="zhuti" :style="{color:colors[ruleForm.color]}">{{ruleForm.zhuti}}</div>
        <div class="cont_box">
          <div class="cont_tit">商品介绍/</div>
          <div class="cont_txt">{{ruleForm.jieshao}}</div>
          <div class="cont_tit">售后服务/</div>
          <div class="cont_txt">{{ruleForm.shouhou}}</div>
          <div class="cont_tit">宣传目的/</div>
          <div class="cont_txt">{{ruleForm.xuanchuan}}</div>
          <div class="cont_tit">对接模式/</div>
          <div class="cont_txt">{{ruleForm.duijie}}</div>
        </div>
        <div class="qrcode_box" v-if="dialogVisible&&ruleForm.mode==1">
          <div class="qrcodeDom" ref="qrcode"></div>
          <div class="kanhao">扫码看号</div>
        </div>

      </div>
      <div v-if="ruleForm.mode==2" class="haibao-box haibao2" ref="haibaoRef">

        <div class="shopname_box">
          <div class="name">{{shopInfo?shopInfo.tenantName:''}}</div>
          <div class="domain">http://{{shopInfo&&shopInfo.domain&&shopInfo.domain.includes(',')?shopInfo.domain.split(',')[0]:shopInfo?shopInfo.domain:''}}</div>
        </div>
        <div class="game ">
          <span class="tit">主做游戏:</span>
          <span>{{ruleForm.gamedes}}</span>
        </div>
        <div class="cont_box">
          <div class="cont_tit">商品介绍</div>
          <div class="cont_txt cont1">{{ruleForm.jieshao}}</div>
          <div class="cont_tit">售后服务</div>
          <div class="cont_txt cont2">{{ruleForm.shouhou}}</div>
          <div class="cont_tit">对接模式</div>
          <div class="cont_txt cont3">{{ruleForm.duijie}}</div>
        </div>
        <div class="qrcode_box" v-if="dialogVisible&&ruleForm.mode==2">
          <div  class="qrcodeDom" ref="qrcode2"></div>
          <div class="kanhao">扫码看号</div>
        </div>

      </div>
    </div>

  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import QRCode from "qrcodejs2";
// 在 Vue 组件中引入 html2canvas
import html2canvas from "html2canvas";
export default {
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },
  data() {
    return {
      timer: 0,
      dialogVisible: false,
      loading: false,
      ruleForm: {
        zhuti: "招募合作商！",
        jieshao: "自营1000+包含王者,和平,lol；每日上新50+",
        shouhou: "默认9:00-24:00稳定在线，售后稳定保障，无号赔付",
        xuanchuan: "寻找长期合作分销商、销售商九折提号全网最低",
        duijie: "支持API,可手动上架,可设置选号网支持虞都互联勾选",
        color: 0,
        mode: 2,
        gamedes: "王者荣耀 和平精英 英雄联盟",
      },
      colors: ["#fff", "#F5F700", "#83FF00"],
      qrCOde: null, //生成商家域名二维码
      rules: {
        collectionType: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        collectionAccountName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        collectionAccount: [
          { required: true, message: "请输入收款账户", trigger: "blur" },
        ],
        collectionUserName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        dxyzm: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  // computed: {
  //   tenantInfo() {
  //     // this.$store.getters.shopInfo
  //     // console.log("%c Line:23 🥓 this.$store.getters.shopInfo", "color:#4fff4B", this.$store.getters.shopInfo);
  //     return this.$store.getters.shopInfo;
  //   },
  // },
  methods: {
    open(user, type) {
      this.loading = false;
      this.dialogVisible = true;
      let localInfo = localStorage.getItem("haibaoInfo");
      if (localInfo) localInfo = JSON.parse(localInfo);
      if (localInfo && localInfo.zhuti) {
        this.ruleForm = localInfo;
      }
      this.makeQrcode();
    },
    modechange() {
      this.$nextTick(() => {
      const parentElement = document.getElementsByClassName("qrcodeDom");
      parentElement[0].innerHTML = ''
        this.makeQrcode();
      });
    },
    //生成二维码
    async makeQrcode() {
      let host = this.shopInfo.domain;
      if (host.includes(",")) {
        host = host.split(",")[0];
      }
      const text = "http://" + host;
      this.$nextTick(() => {
        if (this.qrCOde != null) {
          this.qrCOde.clear(); // 清除代码
        }
        this.qrCOde = null;
        let width = 90;
        let height = 90;
        
        let qrDom = this.$refs.qrcode
        if (this.ruleForm.mode == 2) {
          width = 50;
          height = 50;
          qrDom = this.$refs.qrcode2
        }
        this.qrCOde = new QRCode(qrDom, {
          text: text,
          width: width,
          height: height,
          correctLevel: QRCode.CorrectLevel.H,
        });
        // 添加二维码中间的图片
        if (this.shopInfo.avatar) {
          let logo = new Image();
          logo.setAttribute("crossOrigin", "Anonymous");
          logo.src = this.shopInfo.avatar;
          logo.onload = () => {
            let qrDom = this.qrCOde._el
            let qrImg = this.qrCOde._el.getElementsByTagName("img")[0];
            let canvas = this.qrCOde._el.getElementsByTagName("canvas")[0];
            this.qrCOde._el.title = "";
            canvas.style.display = "inline-block";
            let ctx = canvas.getContext("2d");
            // 设置logo的大小为二维码图片缩小的3.7倍，第二与第三参数代表logo在二维码的位置
            ctx.drawImage(
              logo,
              (width - width / 3.7) / 2,
              (height - height / 3.7) / 2,
              width / 3.7,
              height / 3.7
            );
            qrImg.src = canvas.toDataURL();
            qrImg.style.display = "none";
            // qrDom.removeChild(this.qrCOde._el.getElementsByTagName("img"))
            // let parentNode = this.$refs.qrcode; // 获取参照元素的父元素
            // if (parentNode.contains(this.qrCOde._el)) {
            //   parentNode.removeChild(this.qrCOde._el); // 如果已存在于其他父元素中，先移除
            // }
            // this.$refs.qrcode.appendChild(this.qrCOde._el);
          };
        }
        //生成二维码

        // this.qrcode.makeCode(text);
      });
    },
    //生成图片
    captureCanvas() {
      // 选择你想要转换成图片的 DOM 元素
      this.loading = true;
      const element = this.$refs.haibaoRef;
      html2canvas(element, {
        allowTaint: false,
        background: "",
        // width: 800,
        // height: 1347,
        letterRendering: "",
        proxy: "",
        taintTest: "",
        timeout: 0,
        dpi: window.devicePixelRatio * 2,
        scale: 2,
        logging: true,
        useCORS: true,
      }).then((canvas) => {
        // canvas.toDataURL() 可以获取图片的 base64 编码
        const dataUrl = canvas.toDataURL();
        // 你可以将 dataUrl 设置为一个 img 标签的 src 属性，或者下载图片等
        this.loading = false;
        // 下载
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = "我的海报"; // 设置图片名称
        a.href = dataUrl; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          localStorage.setItem("haibaoInfo", JSON.stringify(this.ruleForm));
          this.captureCanvas();
        } else {
          return false;
        }
      });
    },

    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.pagebox {
  .form-box {
    margin-right: 20px;
    width: 500px;
  }
  .haibao-box {
    width: 400px;
    height: 674px;
    background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/haibao800x1347.png");
    background-size: 100% 100%;
    position: relative;
    color: #fff;
    .yudutxt {
      font-weight: 800;
      font-size: 11px;
      color: #ffffff;
      padding-left: 14px;
      padding-top: 15px;
      img {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .shopname_box {
      text-align: center;
      margin-top: 12px;
      font-weight: 800;
      .name {
        font-size: 29px;
      }
    }
    .zhuti {
      width: 328px;
      height: 50px;
      line-height: 29px;
      border-radius: 4px;
      border: 1px solid #ffffff;
      text-align: center;
      margin: 0 auto;
      font-weight: 800;
      font-size: 29px;
      color: #83ff00;
      margin-top: 15px;
      padding-top: 14px;
    }
    .cont_box {
      // height: 237px;
      border-left: 1px solid #fff;
      position: absolute;
      bottom: 10px;
      left: 20px;
      padding-left: 5px;

      .cont_tit {
        font-weight: 800;
        font-size: 18px;
        line-height: 18px;
        color: #54eaff;
        // margin-bottom: 2px;
      }
      .cont_txt {
        width: 240px;
        padding-bottom: 5px;
      }
    }
    .qrcode_box {
      background: #fff;
      width: 100px;
      height: 100px;
      right: 14px;
      bottom: 40px;
      border-radius: 4px;
      position: absolute;
      .qrcodeDom {
        width: 90px;
        height: 90px;
        margin: 5px auto;
      }
      .kanhao {
        font-weight: 800;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
      }
    }
  }
  .haibao2 {
    height: 659px;
    // https://imgage.maimaihao.com/yuduhulian/erp/static/haibaobg2.png
    background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/haibao2pro.png");
    background-size: 100% 100%;
    .shopname_box {
      margin-top: 55px;
      font-weight: bolder;
      .name {
        font-size: 32px;
      }
      .domain {
        font-size: 19px;
        margin-top: 58px;
      }
    }
    .game {
      font-size: 16px;
      margin-top: 31px;
      margin-left: 40px;
      line-height: 20px;
      font-weight: bold;
      .tit {
        font-size: 24px;
        text-shadow: 2px 0px 4px #001a5b;
        line-height: 50px;
        margin-right: 5px;
      }
    }
    .cont_box {
      border: none;
      left: 40px;
      top: 265px;
      width: 307px;
      .cont_tit {
        font-size: 16px;
        font-weight: 400;
        padding-left: 5px;
        color: #fff;
      }
      .cont_txt {
        color: #000;
        width: 100%;
        box-sizing: border-box;
        font-weight: bold;
        &.cont1 {
          height: 32px;
          overflow: hidden;
          padding-top: 6px;
        }
        &.cont2 {
          height: 47px;
          overflow: hidden;
          padding-top: 4px;
        }
        &.cont3 {
          height: 49px;
          overflow: hidden;
          padding-top: 6px;
        }
      }
    }
    .qrcode_box {
      width: 80px;
      height: 50px;
      bottom: 170px;
      left: 160px;

      .qrcodeDom {
        width: 50px;
        height: 50px;
        margin: 0 auto;
      }
      .kanhao {
        color: #333;
        font-size: 14px;
      }
    }
  }
}
</style>
